<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root" style="width: 100px;height:100px;background-color: red;"></div>
    <script>
        /*
            click：点击
            dbclick：双击
            contextmenu：右键单击
            mousedown：鼠标按下
            mousemove：鼠标移动，其实就像css里的hover
            mouseup：鼠标抬起，其实就是鼠标按住然后松手的那一刻
            mouseout: 鼠标移出
            mouseover：鼠标滑过

            注意onmousedown是不同于click的，因为click的话如果你鼠标按着不松移出去再松手，click是不会触发的，但是onmousedown是在你按下鼠标的那一刻就触发了，无法撤销
        */
        let root = document.querySelector('#root')

        root.onclick = () => {
            console.log('onclick')
        }

        root.ondbclick = () => {
            console.log('ondbclick')
        }

        root.oncontextmenu = () => {
            console.log('contextmenu')
        }

        root.onmousedown = () => {
            console.log('onmousedown')
        }

        root.onmouseup = () => {
            console.log('onmouseup')
        }

        root.onmousemove = () => {
            console.log('onmousemove')
        }
    </script>
</body>

</html>